<template>
  <div class="app-container home">
    <searchForm
      class="searchMain"
      size="medium"
      :isHandle="isHandle"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    ></searchForm>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      max-height="615px"
    >
      <el-table-column type="index" width="50" />
      <el-table-column prop="name" label="姓名" sortable width="180" />
      <el-table-column prop="mine" label="矿山名称" sortable width="180" />
      <el-table-column prop="sore" label="计分值" />
      <el-table-column prop="miningTerritory" label="矿属地" />
      <el-table-column prop="mineType" label="矿类型" />
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            @click="lawEnforcement(scope.row)"
            type="text"
            size="small"
            v-if="scope.row.type === 1"
            v-hasPermi="['mine:law:add']"
          >
            执法
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="update(scope.row)"
            v-if="scope.row.type === 2"
            v-hasPermi="['mine:law:edit']"
          >
            更新
          </el-button>
          <el-button
            @click.native.prevent="details(scope.row)"
            type="text"
            size="small"
            v-if="scope.row.type === 2"
            v-hasPermi="['mine:law:query']"
          >
            计分详情
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteScore(scope.row)"
            v-if="scope.row.type === 2"
            v-hasPermi="['mine:info:remove']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <lawComponent ref="addForm" :popObj="popObj"> </lawComponent>
    <detail
      :popObj="popDetail"
      @cancelPop="cancelDetailPop"
      @confirmPop="confirmDetailPop"
      :detailForm="detailForm"
    ></detail>
  </div>
</template>
        
 <script>
import lawComponent from "./components/index.vue";
import detail from "./components/detailComponent.vue";
import searchForm from "../../components/baseSearchForm/index.vue";
import { list, getScore, delScore } from "@/api/assessmentScoring";

export default {
  name: "Index",
  components: { lawComponent, detail, searchForm },
  data() {
    return {
      currentPage: 1,
      tableData: [],
      popObj: {
        popName: "addForm",
        dialogTitle: "执法",
        dialogVisible: false,
        popupWidth: "1000px",
        showFooter: true,
        id: 0,
      },
      popDetail: {
        popName: "detailForm",
        dialogTitle: "执法详情",
        dialogVisible: false,
        popupWidth: "800px",
        showFooter: true,
      },
      isHandle: true,
      labelWidth: "100px",
      labelPosition: "right",
      searchData: {
        // 查询参数
        mineName: "",
        mineType: "",
        score: "",
      },
      searchForm: [
        {
          type: "Input",
          label: "矿名称",
          prop: "mineName",
          placeholder: "请输入",
        },
        {
          type: "Select",
          label: "矿类型",
          prop: "mineType",
          placeholder: "请选择",
          options: [
            { value: "煤矿", label: "煤矿" },
            { value: "金属矿", label: "金属矿" },
            { value: "非金属矿", label: "非金属矿" },
          ],
        },
        {
          type: "Input",
          label: "计分值",
          prop: "score",
          placeholder: "请输入",
        },
      ],
      searchHandle: [
        {
          label: "查询",
          type: "primary",
          icon: "el-icon-search",
          handle: this.handleSearch,
        },
        {
          label: "重置",
          type: "plain",
          icon: "el-icon-refresh-right",
          handle: this.resetForm,
        },
      ],
      detailForm: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      rowId: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据列表
    getList() {
      try {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          mineName: this.searchData.mineName,
          mineType: this.searchData.mineType,
          scoreValue: this.searchData.score,
        };
        list(params).then((res) => {
          this.tableData = res.data;
          this.total = res.data.length;
        });
      } catch (error) {
        console.log(error);
      }
    },
    lawEnforcement(row) {
      this.popObj.dialogVisible = true;
      this.popObj.dialogTitle = "执法";
      this.popObj.row = { ...row };
      this.$refs.addForm.dataForm.parentId = row.id;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.pageSize = 10;
      this.getList();
    },
    cancelPop() {
      this.popObj.dialogVisible = false;
      // this.$refs.addForm.$refs.dataForm.clearValidate();
    },
    confirmPop() {},
    update(row) {
      this.popObj.dialogVisible = true;
      this.popObj.dialogTitle = "更新";
      getScore(row.id).then((res) => {
        this.popObj.row = { ...res.data };
        this.$refs.addForm.dataForm.value = [
          res.data.mineScore,
          res.data.mineScoreIndex,
        ];
        this.$refs.addForm.dataForm.lawDetail = res.data.lawDetail;
        this.$refs.addForm.dataForm.lawMan = res.data.lawMan;
        this.$refs.addForm.dataForm.id = res.data.id;
        this.$refs.addForm.dataForm.lawFile = res.data.lawFile
        let lastSlashIndex = res.data.lawFile.lastIndexOf("/");
        let url = res.data.lawFile.substring(lastSlashIndex + 1);

        this.$refs.addForm.dataForm.fileList = [
          {
            url:res.data.lawFile,
            name: url,
          },
        ];
      });
    },
    details(row) {
      this.popDetail.dialogVisible = true;
      getScore(row.id).then((res) => {
        this.detailForm = { ...res.data };
      });
    },

    cancelDetailPop() {
      this.popDetail.dialogVisible = false;
    },
    confirmDetailPop() {},
    deleteScore(row) {
      this.$confirm("此操作将删除该执法, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delScore(row.id).then(() => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSearch() {
      this.pageNum = 1;
      this.getList();
    },
    resetForm() {
      this.searchData = {
        // 查询参数
        mineName: "",
        miningType: "",
        score: "",
      };
      this.getList();
    },
  },
};
</script>
        
<style scoped lang="scss">
.block {
  text-align: right;
}
</style>
        
        